<template>
  <div class="dynamics bg">
    <!--   标题区域   -->
    <div class="header">车间动态</div>
    <!--   内容区域   -->
    <div class="content-box" @click="clickProps($event)">
      <vue-seamless-scroll
        class="seamless-warp"
        :data="eventData"
        :class-option="classOption"
      >
        <div
          class="flex flex-a-c eventBox"
          v-for="(item, index) in eventData"
          :key="index"
        >
          <img src="@images/equipment/policeBell.png" />
          <div>
            <div class="title">
              1. 010101设备报警信息报警信息
            </div>
            <div class="time">2022-12-14 10:00:00</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "seamless-scroll",
  components: {
    vueSeamlessScroll
  },
  data: function() {
    return {
      eventData: [1, 2, 3, 4, 5, 6, 7]
    };
  },

  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.bbsData.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },

  methods: {
    clickProps(e) {
      let index = e.target.dataset.index;
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../index";
</style>
